<!--
 * @Description: 新建应用
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-08-05 11:01:39
 * @LastEditTime: 2021-11-17 11:10:59
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <el-dialog
    :title="dialogTitle"
    :close-on-click-modal="false"
    width="500px"
    :visible.sync="dialogStatus"
    @close="cancel"
  >
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px" label-position="right">
      <!-- 应用设置 -->
      <el-form-item label="应用" prop="appType">
        <el-select v-model="form.appType" style="width:100%;">
          <el-option value="HTTP" label="HTTP"></el-option>
          <el-option value="HTTPS" label="HTTPS"></el-option>
          <el-option value="TELNET" label="TELNET"></el-option>
          <el-option value="FTP" label="FTP"></el-option>
          <el-option value="pop3" label="POP3"></el-option>
          <el-option value="snmp" label="SNMP"></el-option>
          <el-option value="1" label="office"></el-option>
          <el-option value="2" label="百度"></el-option>
          <el-option value="3" label="微信"></el-option>
          <el-option value="4" label="优酷"></el-option>
          <el-option value="5" label="腾讯QQ"></el-option>
          <el-option value="6" label="ZOOM"></el-option>
          <el-option value="7" label="抖音"></el-option>
          <el-option value="8" label="哔哩哔哩"></el-option>
          <el-option value="9" label="今日头条"></el-option>
          <el-option value="10" label="爱奇艺"></el-option>
          <el-option value="11" label="网易邮箱"></el-option>
          <el-option value="ANY" label="自定义"></el-option>
        </el-select>
      </el-form-item>
      <!-- 名称 -->
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" maxlength="100" :disabled="ntStatus"></el-input>
      </el-form-item>
      <!-- 类型 -->
      <!-- <el-form-item label="类型" prop="type">
        <el-select v-model="form.type" disabled style="width:100%;">
          <el-option value="IPv4" label="IPv4"></el-option>
        </el-select>
      </el-form-item>-->
      <!-- 协议类型 -->
      <el-form-item label="协议" prop="ipType">
        <el-select v-model="form.ipType" :disabled="form.appType !== 'ANY'" style="width:100%;">
          <el-option value="IP" label="IP"></el-option>
          <el-option value="ICMP" label="ICMP"></el-option>
          <el-option value="TCP" label="TCP"></el-option>
          <el-option value="UDP" label="UDP"></el-option>
          <el-option value="-" label="-" v-show="ntStatus"></el-option>
        </el-select>
      </el-form-item>
      <!-- 监控 -->
      <el-form-item label="监控" prop="log">
        <el-switch v-model="form.log" :active-text="form.log ? '开启' : '关闭'"></el-switch>
      </el-form-item>
      <el-form-item label="源端" prop="sourceAuto">
        <el-switch
          v-model="form.sourceAuto"
          :active-text="form.sourceAuto ? '任意IP' : '手动配置'"
          :disabled="form.ipType === 'Any' || ntStatus"
        ></el-switch>
      </el-form-item>
      <template v-if="!form.sourceAuto">
        <!-- 源 IP:Port/Mask -->
        <el-form-item
          v-if="form.ipType === 'TCP' || form.ipType === 'UDP'"
          label="源"
          class="ip-port-mask"
        >
          <el-input v-model="form.sourceIp" placeholder="IP地址" />
          <label>:</label>
          <el-input v-model.number="form.sourcePortFrom" placeholder="端口" />
          <label>-</label>
          <el-input v-model.number="form.sourcePortTo" placeholder="端口" />
          <label>/</label>
          <el-input v-model.number="form.sourceMask" placeholder="掩码" />
        </el-form-item>
        <!-- 源 IP/Mask -->
        <el-form-item v-else label="源" class="ip-mask">
          <el-input v-model="form.sourceIp" placeholder="IP地址" />
          <label>/</label>
          <el-input v-model.number="form.sourceMask" placeholder="掩码" />
        </el-form-item>
      </template>
      <el-form-item label="目的端" prop="destAuto">
        <el-switch
          v-model="form.destAuto"
          :active-text="form.destAuto ? '任意IP' : '手动配置'"
          :disabled="ntStatus"
        ></el-switch>
      </el-form-item>
      <template v-if="!form.destAuto">
        <!-- 目的 IP:Port/Mask -->
        <el-form-item
          v-if="form.ipType === 'TCP' || form.ipType === 'UDP'"
          label="目的"
          class="ip-port-mask"
        >
          <el-input v-model="form.destIp" placeholder="IP地址" />
          <label>:</label>
          <el-input v-model.number="form.destPortFrom" placeholder="端口" :disabled="portDis" />
          <label>-</label>
          <el-input v-model.number="form.destPortTo" placeholder="端口" :disabled="portDis" />
          <label>/</label>
          <el-input v-model.number="form.destMask" placeholder="掩码" />
        </el-form-item>
        <!-- 目的 IP/Mask -->
        <el-form-item v-else label="目的" class="ip-mask">
          <el-input v-model="form.destIp" placeholder="IP地址" />
          <label>/</label>
          <el-input v-model.number="form.destMask" placeholder="掩码" />
        </el-form-item>
      </template>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['ne', 'type', 'dialogStatus', 'data'],
  data () {
    return {
      ntStatus: false,
      dialogTitle: '',
      portDis: true,
      form: {
        name: '',
        appType: null,
        type: 'IPv4',
        log: false,
        ipType: null,
        sourceAuto: true,
        sourceIp: null,
        sourcePortFrom: null,
        sourcePortTo: null,
        sourceMask: null,
        destAuto: true,
        destIp: null,
        destPortFrom: null,
        destPortTo: null,
        destMask: null
      },
      rules: {
        name: [{
          required: true,
          message: '请填写名称',
          trigger: 'blur'
        }],
        appType: [{
          required: true,
          message: '请选择应用类型',
          trigger: 'change'
        }],
        ipType: [{
          required: true,
          message: '请选择协议类型',
          trigger: 'change'
        }]
      }
    };
  },
  watch: {
    type: {
      immediate: true,
      handler (val) {
        let _this = this;
        if (val === 'create') {
          _this.dialogTitle = '新建应用';
          _this.form = {
            name: '',
            appType: null,
            type: 'IPv4',
            log: false,
            ipType: null,
            sourceAuto: true,
            sourceIp: null,
            sourcePortFrom: null,
            sourcePortTo: null,
            sourceMask: null,
            destAuto: true,
            destIp: null,
            destPortFrom: null,
            destPortTo: null,
            destMask: null
          };
        }
        if (val === 'update') {
          _this.dialogTitle = '编辑应用';
          let form = {
            id: _this.data.id,
            ruleId: _this.data.ruleId,
            aclName: _this.data.aclName,
            name: _this.data.displayName,
            appType: _this.data.appType,
            type: 'IPv4',
            log: false,
            ipType: _this.data.props.ipProtocol.type,
          };
          if (_this.data.props.ipProtocol.type === 'UDP' || _this.data.props.ipProtocol.type === 'TCP') {
            if (_this.data.props.source.anyIp) {
              form.sourceAuto = _this.data.props.source.anyIp;
              form.sourceIp = null;
              form.sourcePortFrom = null;
              form.sourcePortTo = null;
              form.sourceMask = null;
            } else {
              form.sourceAuto = _this.data.props.source.anyIp;
              form.sourceIp = _this.data.props.source.ip.substr(0, _this.data.props.source.ip.indexOf('/'));
              form.sourcePortFrom = _this.data.props.source.portFrom;
              form.sourcePortTo = _this.data.props.source.portTo;
              form.sourceMask = _this.data.props.source.ip.substr(_this.data.props.source.ip.indexOf('/') + 1, _this.data.props.source.ip.length);
            }
            if (_this.data.props.dest.anyIp) {
              form.destAuto = _this.data.props.dest.anyIp;
              form.destIp = null;
              form.destPortFrom = null;
              form.destPortTo = null;
              form.destMask = null;
            } else {
              form.destAuto = _this.data.props.dest.anyIp;
              form.destIp = _this.data.props.dest.ip.substr(0, _this.data.props.dest.ip.indexOf('/'));
              form.destPortFrom = _this.data.props.dest.portFrom;
              form.destPortTo = _this.data.props.dest.portTo;
              form.destMask = _this.data.props.dest.ip.substr(_this.data.props.dest.ip.indexOf('/') + 1, _this.data.props.dest.ip.length);
            }
          } else {
            if (_this.data.props.source.anyIp) {
              form.sourceAuto = _this.data.props.source.anyIp;
              form.sourceIp = null;
              form.sourcePortFrom = null;
              form.sourcePortTo = null;
              form.sourceMask = null;
            } else {
              form.sourceAuto = _this.data.props.source.anyIp;
              form.sourceIp = _this.data.props.source.ip.substr(0, _this.data.props.source.ip.indexOf('/'));
              form.sourcePortFrom = null;
              form.sourcePortTo = null;
              form.sourceMask = _this.data.props.source.ip.substr(_this.data.props.source.ip.indexOf('/') + 1, _this.data.props.source.ip.length);
            }
            if (_this.data.props.dest.anyIp) {
              form.destAuto = _this.data.props.dest.anyIp;
              form.destIp = null;
              form.destPortFrom = null;
              form.destPortTo = null;
              form.destMask = null;
            } else {
              form.destAuto = _this.data.props.dest.anyIp;
              form.destIp = _this.data.props.dest.ip.substr(0, _this.data.props.dest.ip.indexOf('/'));
              form.destPortFrom = null;
              form.destPortTo = null;
              form.destMask = _this.data.props.dest.ip.substr(_this.data.props.dest.ip.indexOf('/') + 1, _this.data.props.dest.ip.length);
            }
          }
          _this.form = form;
        }
      }
    },
    'form.appType': {
      handler (val) {
        let _this = this;
        switch (val) {
          case 'HTTP':
            _this.ntStatus = false;
            _this.form.name = null;
            _this.form.log = false;
            _this.portDis = true;
            _this.form.ipType = 'TCP';
            _this.form.destPortFrom = '80';
            _this.form.destPortTo = '80';
            break;
          case 'HTTPS':
            _this.ntStatus = false;
            _this.form.name = null;
            _this.form.log = false;
            _this.portDis = true;
            _this.form.ipType = 'TCP';
            _this.form.destPortFrom = '443';
            _this.form.destPortTo = '443';
            break;
          case 'TELNET':
            _this.ntStatus = false;
            _this.form.name = null;
            _this.form.log = false;
            _this.portDis = true;
            _this.form.ipType = 'TCP';
            _this.form.destPortFrom = '23';
            _this.form.destPortTo = '23';
            break;
          case 'FTP':
            _this.ntStatus = false;
            _this.form.name = null;
            _this.form.log = false;
            _this.portDis = false;
            _this.form.ipType = 'TCP';
            _this.form.destPortFrom = '20';
            _this.form.destPortTo = '21';
            break;
          case 'pop3':
            _this.ntStatus = true;
            _this.form.name = 'pop3';
            _this.form.log = false;
            _this.portDis = true;
            _this.form.ipType = 'TCP';
            _this.form.destPortFrom = '110';
            _this.form.destPortTo = '110';
            break;
          case 'snmp':
            _this.ntStatus = true;
            _this.form.name = 'snmp';
            _this.form.log = false;
            _this.portDis = true;
            _this.form.ipType = 'UDP';
            _this.form.destPortFrom = '161';
            _this.form.destPortTo = '161';
            break;
          case '1':
            _this.ntStatus = true;
            _this.sourceAuto = true;
            _this.destAuto = true;
            _this.form.log = true;
            _this.form.name = 'office';
            _this.form.ipType = '-';
            break;
          case '2':
            _this.ntStatus = true;
            _this.sourceAuto = true;
            _this.destAuto = true;
            _this.form.log = true;
            _this.form.name = 'baidu';
            _this.form.ipType = '-';
            break;
          case '3':
            _this.ntStatus = true;
            _this.sourceAuto = true;
            _this.destAuto = true;
            _this.form.log = true;
            _this.form.name = 'wechat';
            _this.form.ipType = '-';
            break;
          case '4':
            _this.ntStatus = true;
            _this.sourceAuto = true;
            _this.destAuto = true;
            _this.form.log = true;
            _this.form.name = 'youku';
            _this.form.ipType = '-';
            break;
          case '5':
            _this.ntStatus = true;
            _this.sourceAuto = true;
            _this.destAuto = true;
            _this.form.log = true;
            _this.form.name = 'qq';
            _this.form.ipType = '-';
            break;
          case '6':
            _this.ntStatus = true;
            _this.sourceAuto = true;
            _this.destAuto = true;
            _this.form.log = true;
            _this.form.name = 'zoom';
            _this.form.ipType = '-';
            break;
          case '7':
            _this.ntStatus = true;
            _this.sourceAuto = true;
            _this.destAuto = true;
            _this.form.log = true;
            _this.form.name = 'douyin';
            _this.form.ipType = '-';
            break;
          case '8':
            _this.ntStatus = true;
            _this.sourceAuto = true;
            _this.destAuto = true;
            _this.form.log = true;
            _this.form.name = 'bilibili';
            _this.form.ipType = '-';
            break;
          case '9':
            _this.ntStatus = true;
            _this.sourceAuto = true;
            _this.destAuto = true;
            _this.form.log = true;
            _this.form.name = 'jinritoutiao';
            _this.form.ipType = '-';
            break;
          case '10':
            _this.ntStatus = true;
            _this.sourceAuto = true;
            _this.destAuto = true;
            _this.form.log = true;
            _this.form.name = 'iqiyi';
            _this.form.ipType = '-';
            break;
          case '11':
            _this.ntStatus = true;
            _this.sourceAuto = true;
            _this.destAuto = true;
            _this.form.log = true;
            _this.form.name = 'neteasemail';
            _this.form.ipType = '-';
            break;
          default:
            _this.ntStatus = false;
            _this.form.name = null;
            _this.form.log = false;
            _this.portDis = false;
            _this.form.ipType = null;
            break;
        }
      }
    }
  },
  methods: {
    // 取消
    cancel () {
      let _this = this;
      _this.$emit('handleDialog', false);
      _this.$refs['ruleForm'].resetFields();
    },
    // 过滤IP:Port/Mask
    // eslint-disable-next-line complexity
    ipAddress () {
      let _this = this;
      let ipv4 = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){6}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^::([\da-fA-F]{1,4}:){0,4}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:):([\da-fA-F]{1,4}:){0,3}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){2}:([\da-fA-F]{1,4}:){0,2}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){3}:([\da-fA-F]{1,4}:){0,1}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){4}:((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){7}[\da-fA-F]{1,4}$|^:((:[\da-fA-F]{1,4}){1,6}|:)$|^[\da-fA-F]{1,4}:((:[\da-fA-F]{1,4}){1,5}|:)$|^([\da-fA-F]{1,4}:){2}((:[\da-fA-F]{1,4}){1,4}|:)$|^([\da-fA-F]{1,4}:){3}((:[\da-fA-F]{1,4}){1,3}|:)$|^([\da-fA-F]{1,4}:){4}((:[\da-fA-F]{1,4}){1,2}|:)$|^([\da-fA-F]{1,4}:){5}:([\da-fA-F]{1,4})?$|^([\da-fA-F]{1,4}:){6}:$/;
      let arry = [];
      if (_this.form.ipType === 'Any') {
        if (_this.form.sourceIp === '' || _this.form.sourceIp === null) {
          arry.push('源IP不能为空！');
        } else {
          if (_this.form.sourceIp.replace(ipv4) !== 'undefined') {
            arry.push('源IP格式不正确！');
          }
        }
        if (_this.form.sourceMask === '' || _this.form.sourceMask === null) {
          arry.push('源掩码不能为空！');
        }
        if (_this.form.sourceMask < 0 || _this.form.sourceMask > 32) {
          arry.push('源掩码范围：0-32');
        }
      }
      if (_this.form.ipType === 'IP' || _this.form.ipType === 'ICMP') {
        if (!_this.form.sourceAuto) {
          if (_this.form.sourceIp === '' || _this.form.sourceIp === null) {
            arry.push('源IP不能为空！');
          } else {
            if (_this.form.sourceIp.replace(ipv4) !== 'undefined') {
              arry.push('源IP格式不正确！');
            }
          }
          if (_this.form.sourceMask === '' || _this.form.sourceMask === null) {
            arry.push('源掩码不能为空！');
          }
          if (_this.form.sourceMask < 0 || _this.form.sourceMask > 32) {
            arry.push('源掩码范围：0-32');
          }
        }
        if (!_this.form.destAuto) {
          if (_this.form.destIp === '' || _this.form.destIp === null) {
            arry.push('目的IP不能为空！');
          } else {
            if (_this.form.destIp.replace(ipv4) !== 'undefined') {
              arry.push('目的IP格式不正确！');
            }
          }
          if (_this.form.destMask === '' || _this.form.destMask === null) {
            arry.push('目的掩码不能为空！');
          }
          if (_this.form.destMask < 0 || _this.form.destMask > 32) {
            arry.push('目的掩码范围：0-32');
          }
        }
      }
      if (_this.form.ipType === 'TCP' || _this.form.ipType === 'UDP') {
        if (!_this.form.sourceAuto) {
          if (_this.form.sourceIp === '' || _this.form.sourceIp === null) {
            arry.push('源IP不能为空！');
          } else {
            if (_this.form.sourceIp.replace(ipv4) !== 'undefined') {
              arry.push('源IP格式不正确！');
            }
          }
          if (_this.form.sourcePortFrom === '' || _this.form.sourcePortFrom === null) {
            arry.push('源起始端口不能为空！');
          }
          if (_this.form.sourcePortFrom < 0 || _this.form.sourcePortFrom > 65535) {
            arry.push('源起始端口范围：0-65535');
          }
          if (_this.form.sourcePortTo === '' || _this.form.sourcePortTo === null) {
            arry.push('源结束端口不能为空！');
          }
          if (_this.form.sourcePortTo < 0 || _this.form.sourcePortTo > 65535) {
            arry.push('源结束端口范围：0-65535');
          }
          if (_this.form.sourcePortFrom > _this.form.sourcePortTo) {
            arry.push('源起始端口不能大于结束端口！');
          }
          if (_this.form.sourceMask === '' || _this.form.sourceMask === null) {
            arry.push('源掩码不能为空！');
          }
          if (_this.form.sourceMask < 0 || _this.form.sourceMask > 32) {
            arry.push('源掩码范围：0-32');
          }
        }
        if (!_this.form.destAuto) {
          if (_this.form.destIp === '' || _this.form.destIp === null) {
            arry.push('目的IP不能为空！');
          } else {
            if (_this.form.destIp.replace(ipv4) !== 'undefined') {
              arry.push('目的IP格式不正确！');
            }
          }
          if (_this.form.destPortFrom === '' || _this.form.destPortFrom === null) {
            arry.push('目的起始端口不能为空！');
          }
          if (_this.form.destPortFrom < 0 || _this.form.destPortFrom > 65535) {
            arry.push('目的起始端口范围：0-65535');
          }
          if (_this.form.destPortTo === '' || _this.form.destPortTo === null) {
            arry.push('目的结束端口不能为空！');
          }
          if (_this.form.destPortTo < 0 || _this.form.destPortTo > 65535) {
            arry.push('目的结束端口范围：0-65535');
          }
          if (_this.form.destPortFrom > _this.form.destPortTo) {
            arry.push('目的起始端口不能大于结束端口！');
          }
          if (_this.form.destMask === '' || _this.form.destMask === null) {
            arry.push('目的掩码不能为空！');
          }
          if (_this.form.destMask < 0 || _this.form.destMask > 32) {
            arry.push('目的掩码范围：0-32');
          }
        }
      }
      return arry;
    },
    // 确认
    onSubmit () {
      let _this = this;
      // eslint-disable-next-line complexity
      _this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let result = _this.ipAddress();
          if (result.length === 0) {
            let params = {
              neId: _this.ne.id,
              siteId: _this.ne.extAttrs.siteId,
              displayName: _this.form.name,
              applicationType: 'Acl',
              appType: _this.form.appType,
              log: _this.form.log,
              permit: true,
              type: 'IPv4',
              props: {
                ipProtocol: {
                  type: _this.form.ipType
                },
                source: {},
                dest: {}
              }
            };
            if (_this.form.ipType === 'IP' || _this.form.ipType === 'ICMP') {
              if (_this.form.sourceAuto) {
                params.props.source.anyIp = true;
              } else {
                params.props.source.anyIp = false;
                params.props.source.ip = _this.form.sourceIp + '/' + _this.form.sourceMask;
              }
              if (_this.form.destAuto) {
                params.props.dest.anyIp = true;
              } else {
                params.props.dest.anyIp = false;
                params.props.dest.ip = _this.form.destIp + '/' + _this.form.destMask;
              }
            }
            if (_this.form.ipType === 'TCP') {
              if (_this.form.sourceAuto) {
                params.props.source.anyIp = true;
                params.props.source.portFrom = -1;
                params.props.source.portTo = -1;
              } else {
                params.props.source.anyIp = false;
                params.props.source.ip = _this.form.sourceIp + '/' + _this.form.sourceMask;
                params.props.source.portFrom = _this.form.sourcePortFrom;
                params.props.source.portTo = _this.form.sourcePortTo;
              }
              if (_this.form.destAuto) {
                params.props.dest.anyIp = true;
                params.props.dest.portFrom = -1;
                params.props.dest.portTo = -1;
                if (_this.form.appType === 'HTTP') {
                  params.props.dest.portFrom = _this.form.destPortFrom;
                  params.props.dest.portTo = _this.form.destPortTo;
                }
                if (_this.form.appType === 'HTTPS') {
                  params.props.dest.portFrom = _this.form.destPortFrom;
                  params.props.dest.portTo = _this.form.destPortTo;
                }
                if (_this.form.appType === 'TELNET') {
                  params.props.dest.portFrom = _this.form.destPortFrom;
                  params.props.dest.portTo = _this.form.destPortTo;
                }
                if (_this.form.appType === 'FTP') {
                  params.props.dest.portFrom = _this.form.destPortFrom;
                  params.props.dest.portTo = _this.form.destPortTo;
                }
                if (_this.form.appType === 'pop3') {
                  params.props.dest.portFrom = _this.form.destPortFrom;
                  params.props.dest.portTo = _this.form.destPortTo;
                }
              } else {
                params.props.dest.anyIp = false;
                params.props.dest.ip = _this.form.destIp + '/' + _this.form.destMask;
                params.props.dest.portFrom = _this.form.destPortFrom;
                params.props.dest.portTo = _this.form.destPortTo;
              }
            }
            if (_this.form.ipType === 'UDP') {
              if (_this.form.sourceAuto) {
                params.props.source.anyIp = true;
                params.props.source.portFrom = -1;
                params.props.source.portTo = -1;
              } else {
                params.props.source.anyIp = false;
                params.props.source.ip = _this.form.sourceIp + '/' + _this.form.sourceMask;
                params.props.source.portFrom = _this.form.sourcePortFrom;
                params.props.source.portTo = _this.form.sourcePortTo;
              }
              if (_this.form.destAuto) {
                params.props.dest.anyIp = true;
                params.props.dest.portFrom = -1;
                params.props.dest.portTo = -1;
              } else {
                params.props.dest.anyIp = false;
                params.props.dest.ip = _this.form.destIp + '/' + _this.form.destMask;
                params.props.dest.portFrom = _this.form.destPortFrom;
                params.props.dest.portTo = _this.form.destPortTo;
              }
              if (_this.form.destAuto) {
                params.props.dest.anyIp = true;
                params.props.dest.portFrom = -1;
                params.props.dest.portTo = -1;
                if (_this.form.appType === 'snmp') {
                  params.props.dest.portFrom = _this.form.destPortFrom;
                  params.props.dest.portTo = _this.form.destPortTo;
                }
              } else {
                params.props.dest.anyIp = false;
                params.props.dest.ip = _this.form.destIp + '/' + _this.form.destMask;
                params.props.dest.portFrom = _this.form.destPortFrom;
                params.props.dest.portTo = _this.form.destPortTo;
              }
            }
            if (_this.form.appType === '1' || _this.form.appType === '2' || _this.form.appType === '3' || _this.form.appType === '4' || _this.form.appType === '5' || _this.form.appType === '6' || _this.form.appType === '7' || _this.form.appType === '8' || _this.form.appType === '9' || _this.form.appType === '10' || _this.form.appType === '11') {
              params.applicationType = 'Dpi';
              params.props.source.anyIp = true;
              params.props.source.portFrom = -1;
              params.props.source.portTo = -1;
              params.props.dest.anyIp = true;
              params.props.dest.portFrom = -1;
              params.props.dest.portTo = -1;
              params.dpiId = _this.form.appType;
            }
            if (_this.type === 'create') {
              _this.$http.post({
                url: '/api/sdwan/application/aclrule/create',
                data: params
              }).then(res => {
                let { status } = res;
                if (status === '0') {
                  _this.$message.success('创建成功！');
                  _this.$parent.reset();
                  _this.cancel();
                }
              });
            } else {
              // 编辑时，需要规则ID，ACL名称
              params.id = _this.form.id;
              params.ruleId = _this.form.ruleId;
              params.aclName = _this.form.aclName;
              params.siteId = _this.ne.extAttrs.siteId;
              // 请求更新
              _this.$http.post({
                url: '/api/sdwan/aclruleorchestrator/update',
                data: params
              }).then(res => {
                let { status } = res;
                if (status === '0') {
                  _this.$message.success('更新成功！');
                  _this.$parent.reset();
                  _this.cancel();
                }
              });
            }
          } else {
            _this.$message.error(result[0]);
          }
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.ip-mask {
  width: 100%;
  ::v-deep .el-input {
    float: left;
  }
  ::v-deep .el-input:first-child {
    width: 75%;
  }
  label {
    display: block;
    width: 5%;
    float: left;
    text-align: center;
  }
  ::v-deep .el-input:last-child {
    width: 20%;
    &::after {
      content: "";
      overflow: hidden;
      clear: both;
    }
  }
}
.ip-port-mask {
  width: 100%;
  ::v-deep .el-input {
    float: left;
  }
  ::v-deep .el-input:first-child {
    width: 37%;
  }
  label {
    display: block;
    width: 5%;
    float: left;
    text-align: center;
  }
  ::v-deep .el-input {
    width: 16%;
  }
  ::v-deep .el-input:last-child {
    width: 16%;
    &::after {
      content: "";
      overflow: hidden;
      clear: both;
    }
  }
}
</style>